<template>
	<view>
		<!-- 自定义导航栏 -->
		<!-- <z-nav-bar :title="sUserInfo.nickname"></z-nav-bar> -->
		<view class="bgcolor">
			<cu-custom bgColor="bgmain" :isBack="true">
				<view slot="content">{{sUserInfo.nickname}}</view>
			</cu-custom>
		</view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation"
				:scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory"
				upper-threshold="100">
				<!-- 加载历史数据waitingUI -->
				<view class="loading">
					<view class="spinner">
						<!-- <view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view> -->
					</view>
				</view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id">
					<!-- 系统消息 -->
					<!-- {{row.msg.id}} -->
					<block v-if="row.type=='system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.msg.type=='text'" class="text">
								{{row.msg.content.text}}
							</view>
							<view v-if="row.msg.type=='submsg'" class="text" @click="subscribe">
								{{row.msg.content.text}} <text style="color: #7F5AFF;margin-left: 10rpx;">&nbsp; ❤ 订阅
									❤</text>
							</view>
							<!-- 领取红包消息 -->
							<view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
								<image src="/static/img/red-envelope-chat.png"></image>
								{{row.msg.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type=='user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.msg.userinfo.u_id==myuid">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image src="/static/img/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.msg.content.blessing}}
									</view>
								</view>

							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image :src="row.msg.userinfo.face"></image>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.msg.userinfo.u_id!=myuid">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.msg.userinfo.face"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.msg.userinfo.username}}</view>
									<view class="time">{{row.msg.time}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.id?'play':''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)">
									<image :src="row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image src="/static/img/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.msg.content.blessing}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src=" emojiUrl + '/static/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
					</view>
					<!-- <view class="box" @tap="camera"><view class="icon paizhao"></view></view> -->
					<!-- <view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view> -->
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass + bottomClass" @touchmove.stop.prevent="discard"
			:style="'bottom:' + bottom + 'px'">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<!-- <view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<!-- @focus="inputFocus" -->
						<textarea @blur="inputBlur" auto-height="true" placeholder="  " cursor-spacing="10"
							:show-confirm-bar="false" v-model="textMsg" @focus="textareaFocus" />
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
			<!-- <view class="hhh">x</view>
			<view class="hhh">x</view>
			<view class="hhh">x</view>
			<view class="hhh">x</view> -->

		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image src="/static/img/im/face/face_1.jpg"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="icon to"></view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import socket from '@/utils/socket';
	import emoji from './emoji.js';
	import siteInfo from '@/siteinfo.js';
	var app = getApp();
	export default {
		data() {
			return {
				emojiUrl: siteInfo.url.replace(/api\//g, ""),
				//文字消息
				textMsg:'',
				//消息列表
				isHistoryLoading:false,
				scrollAnimation:false,
				scrollTop:0,
				scrollToView:'',
				msgList:[],
				msgImgList:[],
				myuid:'',
				
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER:uni.getRecorderManager(),
				// #endif
				isVoice:false,
				voiceTis:'按住 说话',
				recordTis:"手指上滑 取消发送",
				recording:false,
				willStop:false,
				initPoint:{identifier:0,Y:0},
				recordTimer:null,
				recordLength:0,
				
				//播放语音相关参数
				AUDIO:uni.createInnerAudioContext(),
				playMsgid:null,
				VoiceTimer:null,
				// 抽屉参数
				popupLayerClass:'',
				// more参数
				hideMore:true,
				//表情定义
				hideEmoji:true,
				emojiList: emoji,
				//红包相关参数
				windowsState:'',
				redenvelopeData:{
					rid:null,	//红包ID
					from:null,
					face:null,
					blessing:null,
					money:null
				},
				s_id: '', // 发送对象id
				userInfo: {}, // 用户信息
				sUserInfo: {}, // 聊天对象信息
				page: 1, // 分页
				bottom:0,
				bottomClass:" "
			};
		},
		onLoad(option) {
			var that = this
			
			app.globalData.util.request({
				url: 'WechatUser/users',
				data: {},
				success(res) {
					that.myuid = res.data.data.u_id,
					uni.setStorageSync('dmhu_id',res.data.data.u_id)
					that.userInfo = res.data.data
				}
			},true)
			app.globalData.util.request({
				url: 'WechatUser/userss',
				data: {
					u_id:option.s_id
					// ...option
				},
				success(res) {
					that.sUserInfo = res.data.data
				}
			},true)
			console.log(option,'lllllll')
			this.s_id = option.s_id
			this.getMsgList();
			if(!socket.socketStart){
				socket.init();
			}
			//语音自然播放结束
			this.AUDIO.onEnded((res)=>{
				this.playMsgid=null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e)=>{
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e)=>{
				this.recordEnd(e);
			})
			// #endif
			let t = this;
			socket.acceptMessage = function(res){
				console.log('----------',res);
				if(res.type == 'msg'){
					uni.showTabBarRedDot({index:2})
				}
				if(res.type == 'msg' && res.data.msg.userinfo.u_id == t.s_id){
					console.log('发消息了');
					t.screenMsg(res.data)
				}
				
			}
		},
		onShow(){
			this.scrollTop = 9999999;
			// 检测登录
			// this.judgeLogin(()=>{
				// this.userInfo = uni.getStorageSync('userInfo');
				// this.myuid = uni.getStorageSync('userInfo').uid
			// });
			
			//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
			//
			// uni.getStorage({
			// 	key: 'redEnvelopeData',
			// 	success:  (res)=>{
			// 		console.log(res.data);
			// 		let nowDate = new Date();
			// 		let lastid = this.msgList[this.msgList.length-1].msg.id;
			// 		lastid++;
			// 		let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
			// 		this.screenMsg(row);
			// 		uni.removeStorage({key: 'redEnvelopeData'});
			// 	}
			// });
		},
		methods:{ 
			inputFocus(e) {
				this.setData({
					bottom: e.detail.height
				});
				this.bottom=0
				this.bottomClass=""
			},

			inputBlur() {
				this.bottom = 0
				this.bottomClass = ""

				
			},
			// 接受消息(筛选处理)
			screenMsg(msg){
				//从长连接处转发给这个方法，进行筛选处理
				if(msg.type=='system'){
					// 系统消息
					switch (msg.msg.type){
						case 'text':
							this.addSystemTextMsg(msg);
							break;
						case 'redEnvelope':
							this.addSystemRedEnvelopeMsg(msg);
							break;
					}
				}else if(msg.type=='user'){
					// 用户消息
					switch (msg.msg.type){
						case 'text':
							this.addTextMsg(msg);
							break;
						case 'voice':
							this.addVoiceMsg(msg);
							break;
						case 'img':
							this.addImgMsg(msg);
							break;
						case 'redEnvelope':
							this.addRedEnvelopeMsg(msg);
							break;
					}
					
					//非自己的消息震动
					if(msg.msg.userinfo.u_id!=this.myuid){
						console.log('振动');
						uni.vibrateLong();
					}
				}
				this.$nextTick(function() {
					// 滚动到底
					this.scrollToView = 'msg'+msg.msg.id
				});
			},
			// 订阅消息
			subscribe(){
				var that = this
				// that.$http.get('api/SysSite/index').then(res=>{
				// 	if(res){
				// 		uni.requestSubscribeMessage({
				// 		  tmplIds: [res.list[0].gift_template_id,res.list[0].chat_template_id],
				// 		  success (res) {
				// 			  console.log(res)
				// 		  }
				// 		})
				// 	}
				// })
				app.globalData.util.request({
					url: 'SysSite/index',
					data: {},
					success(res) {
						uni.requestSubscribeMessage({
								  tmplIds: [res.list[0].gift_template_id,res.list[0].chat_template_id],
								  success (res) {
									  console.log(res)
								  }
								})
					}
				})
				
			},
			
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				if(this.isHistoryLoading){
					return ;
				}
				this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
				this.scrollAnimation = false;//关闭滑动动画
				let Viewid = this.msgList[0].msg.id;//记住第一个信息ID
				//本地模拟请求历史记录效果
				setTimeout(()=>{
					var that = this
					that.page++
					// that.$http.get('api/ZhChat/getChatRecord',{'s_id': that.s_id,'page':that.page}).then(res=> {
					// 	that.sUserInfo = res.sdata
					// 	if(res.data.data.length <= 0){
					// 		return false
					// 	}
					// 	let list = res.data.data
					// 	// 消息列表
						
					// 	// 获取消息中的图片,并处理显示尺寸
					// 	for(let i=0;i<list.length;i++){
					// 		if(list[i].type=='user'&&list[i].msg.type=="img"){
					// 			list[i].msg.content = this.setPicSize(list[i].msg.content);
					// 			this.msgImgList.unshift(list[i].msg.content.url);
					// 		}
					// 		list[i].msg.id = Math.floor(Math.random()*1000+1);
					// 		this.msgList.unshift(list[i]);
					// 	}
						
					// 	//这段代码很重要，不然每次加载历史数据都会跳到顶部
					// 	this.$nextTick(function() {
					// 		this.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置
					// 		this.$nextTick(function() {
					// 			this.scrollAnimation = true;//恢复滚动动画
					// 		});
							
					// 	});
					// 	this.isHistoryLoading = false;
					// })
					app.globalData.util.request({
						url: 'ZhChat/getChatRecord',
						data: {
							s_id: that.s_id,
							page:that.page
						},
						success:(res)=> {
							console.log(res);
							that.sUserInfo = res.data.data.sdata
							if(res.data.data.data.data.length <= 0){
								return false
							}
							let list = res.data.data.data.data
							// 消息列表
						
							// 获取消息中的图片,并处理显示尺寸
							for(let i=0;i<list.length;i++){
								if(list[i].type=='user'&&list[i].msg.type=="img"){
									list[i].msg.content = this.setPicSize(list[i].msg.content);
									this.msgImgList.unshift(list[i].msg.content.url);
								}
								// list[i].msg.id = Math.floor(Math.random()*1000+1);
								this.msgList.unshift(list[list.length-i-1]);

							}
							// this.msgList=[
							// 	...list, ...this.msgList
							// ]

							//这段代码很重要，不然每次加载历史数据都会跳到顶部
								this.$nextTick(function () {
									this.scrollToView = 'msg' + Viewid;//跳转上次的第一行信息位置
									this.$nextTick(function () {
										this.scrollAnimation = true;//恢复滚动动画
									});

								});
							
							
							this.isHistoryLoading = false;
						}
					},true)
					
				},1000)
			},
			// 加载初始页面消息
			getMsgList(){
				var that = this
				
				// that.$http.get('api/ZhChat/getChatRecord',{'s_id': that.s_id,'page':that.page}).then(res=> {
				// 	that.sUserInfo = res.sdata
				// 	let list = []
				// 	if(that.page == 1){
				// 		list = [{type:"system",msg:{id:0,type:"submsg",content:{text:"点击订阅新消息提醒"}}}]
				// 	}
				// 	// list = res.data.data
				// 	list = [...res.data.data,...list]
				// 	// 获取消息中的图片,并处理显示尺寸
				// 	for(let i=0;i<list.length;i++){
				// 		if(list[i].type=='user'&&list[i].msg.type=="img"){
				// 			list[i].msg.content = this.setPicSize(list[i].msg.content);
				// 			this.msgImgList.push(list[i].msg.content.url);
				// 		}
				// 	}
				// 	that.msgList = list;
				// 	// 滚动到底部
				// 	this.$nextTick(function() {
				// 		//进入页面滚动到底部
				// 		this.scrollTop = 9999;
				// 		this.$nextTick(function() {
				// 			this.scrollAnimation = true;
				// 		});
						
				// 	});
				// })
				app.globalData.util.request({
					url: 'ZhChat/getChatRecord',
					data: {
						s_id: that.s_id,
						page:that.page
					},
					success(res) {
						that.sUserInfo = res.sdata
						let list = []
						if(that.page == 1){
							list = [{type:"system",msg:{id:0,type:"submsg",content:{text:"点击订阅新消息提醒"}}}]
						}
						list = res.data.data.data.data
						console.log("打印数组",res.data.data.data.data)
						// list = [...res.data.data,...list]
						// 获取消息中的图片,并处理显示尺寸
						for(let i=0;i<list.length;i++){
							if(list[i].type=='user'&&list[i].msg.type=="img"){
								list[i].msg.content = that.setPicSize(list[i].msg.content);
								that.msgImgList.push(list[i].msg.content.url);
							}
						}
						that.msgList = list;
						// 滚动到底部
						that.$nextTick(function() {
							//进入页面滚动到底部
							that.scrollTop = 9999;
							that.$nextTick(function() {
								that.scrollAnimation = true;
							});
							
						});
					}
				},true)
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content){
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
				if(content.w>maxW||content.h>maxH){
					let scale = content.w/content.h;
					content.w = scale>1?maxW:maxH*scale;
					content.h = scale>1?maxW/scale:maxH;
				}
				return content;
			},
			
			//更多功能(点击+弹出) 
			showMore(){
				this.isVoice = false;
				this.hideEmoji = true;
				if(this.hideMore){
					this.hideMore = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer(){
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer(){
				this.popupLayerClass = '';
				setTimeout(()=>{
					this.hideMore = true;
					this.hideEmoji = true;
				},150);
			},
			// 选择图片发送
			chooseImage(){
				this.getImage('album');
			},
			//拍照发送
			camera(){
				this.getImage('camera');
			},
			//发红包
			handRedEnvelopes(){
				uni.navigateTo({
					url:'HM-hand/HM-hand'
				});
				this.hideDrawer();
			},
			//选照片 or 拍照
			getImage(type){
				this.hideDrawer();
				var that = this
				// uni.chooseImage({
				// 	sourceType:[type],
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	success: (res)=>{
				// 		for(let i=0;i<res.tempFilePaths.length;i++){
				// 			uni.getImageInfo({
				// 				src: res.tempFilePaths[i],
				// 				success: (image)=>{
				// 					console.log(image.width);
				// 					console.log(image.height);
				// 					let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
				// 					this.sendMsg(msg,'img');
				// 				}
				// 			});
				// 		}
				// 	}
				// });

				
				// this.$http.urlImgUpload({
				// 	 count: 1,
				// 	 sizeType: ['compressed']
				// 	}).then(e=>{
				// 		console.log(e)
				// 		uni.getImageInfo({
				// 			src: e[0],
				// 			success: (image)=>{
				// 				console.log(image.width);
				// 				console.log(image.height);
				// 				let msg = {url:e[0],w:image.width,h:image.height};
				// 				this.sendMsg(msg,'img');
				// 			}
				// 		});
				// 	})
				uni.chooseImage({
					counts: 1,
					sizeType: ['compressed'],
					// 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						that.uploadimgs({
							path: res.tempFilePaths //这里是选取的图片的地址数组
							
						});
					}
				});
			},
			uploadimgs: function(data) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				});
				console.log("上传中");
				var that = this; // console.log("打印",data.path.length)
				// var count = that.data.addedCount + data.path.length;
			
				var counts = that.addedCountss;
			
				for (var i = 0; i < data.path.length; i++) {
					// console.log("走这里")
			
					uni.uploadFile({
						// url: app.globalData.util.url() + 'c=entry&a=wxapp&do=ImgPost&m=gc_school',
						// filePath: data.path[i],
						// name: 'file',
						// formData: null,
						url: siteInfo.url + 'Base/upload',
						filePath: data.path[i],
						header: {
							'Authorization': uni.getStorageSync('token')
						},
						name: 'file',
						formData: {
							'wxapp_id': siteInfo.uniacid
						},
						success: resp => {
			
							uni.hideLoading();

							var pic = JSON.parse(resp.data.replace('Array',''));
							let msg = {url:pic.data,w:100,h:100};
							console.log('111',pic)
							console.log(pic.status, '---11---')
							if (pic.status == 200) {
								counts++; // console.log(pic)
								console.log('222')
								that.sendMsg(msg, 'img');

			// 					var picList = that.picListss;
			// 					picList.push(pic.data); // console.log(data.path[i])
			
			// 					var images = that.imagesss.concat(pic.data);
			// 					console.log('333')
			// 					that.setData({
			// 						imagesss: images,
			// 						addedCountss: counts,
			// 						picListss: picList
			// 					});
			// 					console.log(that.addedCount);
			// 					console.log('444')
			// 					if (counts == that.picListss.length) {
			// 						console.log('555')
									uni.hideLoading({});
								// }
							} else {
								uni.showToast({
									title: pic.msg,
									icon: 'none'
								});
							}
						}
					});
				}
			},
			// 选择表情
			chooseEmoji(){
				this.hideMore = true;
				if(this.hideEmoji){
					this.hideEmoji = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em){
				this.textMsg+=em.alt;
			},
			
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(e){
				this.bottom = 0
				this.bottomClass=" bottom"
				// this.bottom = e.detail.height
				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
					this.hideDrawer();
				}
			},
			// 发送文字消息
			sendText(){
				this.hideDrawer();//隐藏抽屉
				if(!this.textMsg){
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				let msg = {text:content}
				this.sendMsg(msg,'text');
				this.textMsg = '';//清空输入框
			},
			//替换表情符号为图片
			replaceEmoji(str){
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
					console.log("item: " + item);
					for(let i=0;i<this.emojiList.length;i++){
						let row = this.emojiList[i];
						for(let j=0;j<row.length;j++){
							let EM = row[j];
							if(EM.alt==item){
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = this.emojiUrl + '/static/emoji/'
								
								// let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
								let imgstr = '<img src="'+onlinePath + EM.url+'">';
								console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';
			},
			
			// 发送消息
			sendMsg(content,type){
				var that = this;
				//实际应用中，此处应该提交长连接，模板仅做本地处理。
				var nowDate = new Date();
				var lastid = that.msgList.length > 0 ? that.msgList[that.msgList.length-1]['msg']['id'] : 0;
				console.log(that.sUserInfo,'对方的用户信息');
				var userInfo = {
					u_id : that.userInfo.u_id,
					face : that.userInfo.avatar,
					username : that.userInfo.nickname
				}
				
				
				lastid++;
				var msg = {
					type:'user',
					msg:{
						id:lastid,
						wxapp_id:siteInfo.uniacid,
						suserinfo:that.s_id,
						time:nowDate.getHours()+":"+nowDate.getMinutes(),
						type:type,
						userinfo:userInfo,
						content:content,
						},
						}
				console.log(msg,'------------------')  
				that.screenMsg(msg);
				// 发送消息
				socket.send({type:'msg',data:msg});
				
				// 定时器模拟对方回复,三秒
				// setTimeout(()=>{
				// 	lastid = this.msgList[this.msgList.length-1].msg.id;
				// 	lastid++;
				// 	msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:content}}
				// 	// 本地模拟发送消息
				// 	this.screenMsg(msg);
				// },3000)
			},
			
			// 添加文字消息到列表
			addTextMsg(msg){
				this.msgList.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg){
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg){
				
				msg.msg.content = this.setPicSize(msg.msg.content);
				this.msgImgList.push(msg.msg.content.url);
				this.msgList.push(msg);
			},
			addRedEnvelopeMsg(msg){
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg){
				this.msgList.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg){
				this.msgList.push(msg);
			},
			// 打开红包
			openRedEnvelope(msg,index){
				let rid = msg.content.rid;
				uni.showLoading({
					title:'加载中...'
				});
				console.log("index: " + index);
				//模拟请求服务器效果
				setTimeout(()=>{
					//加载数据
					if(rid==0){
						this.redenvelopeData={
							rid:0,	//红包ID
							from:"大黑哥",
							face:"/static/img/im/face/face.jpg",
							blessing:"恭喜发财，大吉大利",
							money:"已领完"
						}
					}else{
						this.redenvelopeData={
							rid:1,	//红包ID
							from:"售后客服008",
							face:"/static/img/im/face/face_2.jpg",
							blessing:"恭喜发财",
							money:"0.01"
						}
						if(!msg.content.isReceived){
							// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
							this.sendSystemMsg({text:"你领取了"+(msg.userinfo.u_id==this.myuid?"自己":msg.userinfo.username)+"的红包"},'redEnvelope');
							console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
							this.msgList[index].msg.content.isReceived = true;
						}
					}
					uni.hideLoading();
					this.windowsState = 'show';
					
				},200)
				
			},
			// 关闭红包弹窗
			closeRedEnvelope(){
				this.windowsState = 'hide';
				setTimeout(()=>{
					this.windowsState = '';
				},200)
			},
			sendSystemMsg(content,type){
				let lastid = this.msgList[this.msgList.length-1].msg.id;
				lastid++;
				let row = {type:"system",msg:{id:lastid,type:type,content:content}};
				this.screenMsg(row)
			},
			//领取详情
			toDetails(rid){
				uni.navigateTo({
					url:'HM-details/HM-details?rid='+rid
				})
			},
			// 预览图片
			showPic(msg){
				uni.previewImage({
					indicator:"none",
					current:msg.content.url,
					urls: this.msgImgList
				});
			},
			// 播放语音
			playVoice(msg){
				console.log(msg,'******1')
				this.playMsgid=msg.id;
				this.AUDIO.src = msg.content.url;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e){
				if(e.touches.length>1){
					return ;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({format:"mp3"});//录音开始,
			},
			//录音开始UI效果
			recordBegin(e){
				this.recording = true;
				this.voiceTis='松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(()=>{
					this.recordLength++;
				},1000)
			},
			// 录音被打断
			voiceCancel(){
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true;//不发送录音
				this.RECORDER.stop();//录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e){
				if(!this.recording){
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				}else{
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e){
				if(!this.recording){
					return;
				}
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop();//录音结束
			},
			//录音结束(回调文件)
			recordEnd(e){
				clearInterval(this.recordTimer);
				console.log(e,'录音')
				e['path'] = e.tempFilePath
				e['size'] = e.fileSize
				let options = {
					count: 1,
					files: [e]
				}
				if(!this.willStop){
					this.$http.urlFileUpload(options).then(res=> {
						let msg = {
							length:0,
							url: res[0]
						}
						let min = parseInt(this.recordLength/60);
						let sec = this.recordLength%60;
						min = min<10?'0'+min:min;
						sec = sec<10?'0'+sec:sec;
						msg.length = min+':'+sec;
						this.sendMsg(msg,'voice');
					})
					
					// console.log("e: " + JSON.stringify(e));
					// let msg = {
					// 	length:0,
					// 	url:e.tempFilePath
					// }
					// let min = parseInt(this.recordLength/60);
					// let sec = this.recordLength%60;
					// min = min<10?'0'+min:min;
					// sec = sec<10?'0'+sec:sec;
					// msg.length = min+':'+sec;
					// this.sendMsg(msg,'voice');
				}else{
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			// 切换语音/文字输入
			switchVoice(){
				this.hideDrawer();
				this.isVoice = this.isVoice?false:true;
			},
			discard(){
				return;
			}
		}  
	}
</script>
<style lang="scss">
	@import "@/static/HM-chat/css/style.scss"; 
	.input-box{
		position: fixed !important;
	}
	.username{
		display: flex;
		align-items: center;
	}
	.bottom{
		// margin-bottom:$bottom !important;
		// bottom:$bottom !important;
		// padding-bottom:$bottom !important;
		// .hhh{
		// 	height: $bottom !important;
		// 	flex-shrink: 0;
		// }
	}
</style>